<template>
  <!-- 组题列表 -->
  <div class="userBox">
    <el-card
      class="box-card"
      :body-style="{ padding: '20px', minHeight: '230px' }"
    >
      <!--搜索和新增 -->
      <el-form :model="form"  size="small">
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <el-form-item prop="pass" label="关键字" label-width="80px">
              <el-input
                style="width: 280px"
                type="text"
                v-model="form.keyword"
                placeholder="根据编号搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :style="{ float: 'right' }">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 以上是搜索和新增 -->
      <!-- 条数显示 -->
      <el-alert
        :title="'数据一共 ' + counts + ' 条'"
        type="info"
        :closable="false"
        show-icon
        :style="{ marginBottom: '15px' }"
      >
      </el-alert>
      <!-- 以上是条数显示 -->
      <!-- 以下是表格 -->
      <el-table
        :data="renderList"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: '#fafafa',
          color: '#909399'
        }"
      >
        <el-table-column prop="id" label="编号" width="220px">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80px">
          <template #default="{ row }">
          <span>{{
              +row.questionType === 1
                ? '单选'
                : +row.questionType === 2
                ? '多选'
                : '简答'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="题目编号" width="200px">
          <template #default="{ row }">
            <div v-for="item in row.questionIDs" :key="item.number">
              <a href="#" @click="$refs.showDialog.openDialogs(item.id)" :style="{ color: 'rgb(0, 153, 255)' }">{{
                item.number
              }}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180px">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="80px">
          <template slot-scope="scope">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              size="small"
              @click="del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="prev, pager,next,sizes,jumper"
        :total="counts"
        :style="{ display: 'flex', justifyContent: 'end' }"
      >
      </el-pagination>
      <!-- 以上是表格 -->
    </el-card>
    <QuestionPreview ref="showDialog" ></QuestionPreview>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import QuestionPreview from '../components/questions-zq.vue'
export default {
  components: {
    QuestionPreview
  },
  data () {
    return {
      num: 0,
      form: {
        keyword: ''
      },
      page: 1,
      pagesizes: [20, 30, 50, 100],
      pagesize: 20,
      counts: 0,
      renderList: [],
      text: '',
      pageTitle: '用户',
      PermissionGroupsList: ''
    }
  },
  async created () {
    this.getList()
  },

  methods: {
    // 获取渲染数据
    async getList (keyword) {
      const obj = {
        page: this.page,
        pagesize: this.pagesize,
        keyword
      }
      if (this.form.username) obj.username = this.form.username
      const { data } = await randoms(obj)
      this.renderList = data.items
      this.counts = data.counts
    },
    search () {
      console.log(this.form)
      this.getList(this.form.keyword)
    },
    // 控制显示条数
    handleSizeChange (value) {
      this.pagesize = value
      this.page = 1
      this.getList()
    },
    // 控制显示页数
    handleCurrentChange (value) {
      this.page = value
      this.getList()
    },
    clear () {
      this.form.keyword = ''
      console.log(1)
      this.getList()
    },

    newDataes () {
      this.page = 1
      this.getList()
    },
    async del (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id })
          this.page = 1
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          this.getList()
        })
    }
  }
}
</script>

<style scoped lang="less">
.userBox {
  padding: 10px;
}
.search {
  display: flex;
  justify-content: space-between;
  height: 32px;
}
</style>
